<template>
	<!-- 用户信息 -->
	<view>
		<MyNavbar title="个人信息" ></MyNavbar>
		
		<div class="base-box" v-if="userInfo">
			<u-cell title="头像" is-link>
				<u-avatar slot="value" :src="userInfo.avatar"/>
			</u-cell>
			<u-cell title="昵称" :value="userInfo.nickname" is-link>
			</u-cell>
			<u-cell title="账号" :value="userInfo.username" is-link>
			</u-cell>
		</div>
		<div v-else class="base-box">
			请先登录
		</div>
		
		<div style="background-color: #FFFFFF; margin: 24rpx;">
			<u-cell-group :border="false" >
				<u-cell title="退出登录" :border="false" :isLink="true" @click="onClickLogout()"></u-cell>
			</u-cell-group>
		</div>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState('user', {
				userInfo: 'userInfo'
			}),
		},
		methods: {
			...mapActions('user', {
				logout: 'logout',
			}),
			// 点击退出登录
			onClickLogout(){
				this.logout().then(()=>{
					uni.navigateTo({
						url: '/pages/login/login'
					})
				});;
			},
		}
	}
</script>

<style>

</style>
